<template>
	<view>
		<view class="select-box">
			<sun-dropDown v-on:onSubmitAddress="onSubmitAddress"></sun-dropDown>
		</view>
		<view class="dates-box ">
			<view style="width: 100%;" class="dates f-row-between">
				<view class="date f-center" :style="{ width: 100 / 4 - 3 + '%' }" :class="selected == 'd' ? 'selected' : ''" @click="selected = 'd'">
					今日
				</view>
				<view class="date f-center" :style="{ width: 100 / 4 - 3 + '%' }" :class="selected == 'zr' ? 'selected' : ''"
				 @click="selected = 'zr'">
					昨日
				</view>
				<view class="date f-center" :style="{ width: 100 / 4 - 3 + '%' }" :class="selected == 'z' ? 'selected' : ''" @click="selected = 'z'">
					本周
				</view>
				<view class="date f-center" :style="{ width: 100 / 4 - 3 + '%' }" :class="selected == 'm' ? 'selected' : ''" @click="selected = 'm'">
					本月
				</view>
			</view>
			<sun-Dates :selected="selected" :showDate="true" @onSubmit="onSubmitDate"></sun-Dates>
		</view>
		<view class="tietle-box">
			<sun-tietleBox :tietleData="'经营预览'" :showLine="false"></sun-tietleBox>
		</view>
		<view class="total-box f-row-between">
			<view class="itemMoney f-column-Wcenter f-column-between" :style="{ width: 100 / 4 - 2 + '%' }">
				<label class="icons iconxiaoshoue"></label>
				<label>销售额(元)</label>
				<view class="total f-row-Wcenter f-row-Hcenter">
					<label style="font-size: 22upx;">￥</label>
					<label>{{ resData.vip[0].sale_amt.numder || "0.00"  }}{{ resData.vip[0].sale_amt.unit || '' }}</label>
				</view>
			</view>
			<view class="itemMoney f-column-Wcenter f-column-between" :style="{ width: 100 / 4 - 2 + '%' }">
				<label class="icons icontuikuane"></label>
				<label>退款额(元)</label>
				<view class="total f-row-Wcenter f-row-Hcenter">
					<label style="font-size: 22upx;">￥</label>
					<label>{{ resData.vip[0].ret_amt.numder || "0.00" }}{{ resData.vip[0].ret_amt.unit || '' }}</label>
				</view>
			</view>
			<view class="itemMoney f-column-Wcenter f-column-between" :style="{ width: 100 / 4 - 2 + '%' }">
				<label class=" icons iconkedanjia"></label>
				<label>客单数(笔)</label>
				<view class="total f-row-Wcenter f-row-Hcenter">
					<label>{{ resData.vip[0].cust_nums.numder || "0.00" }}{{ resData.vip[0].cust_nums.unit || '' }}</label>
				</view>
			</view>
			<view class="itemMoney f-column-Wcenter f-column-between" :style="{ width: 100 / 4 - 2 + '%' }">
				<label class="icons iconkedanshu"></label>
				<label>客单价(元)</label>
				<view class="total f-row-Wcenter f-row-Hcenter">
					<label style="font-size: 22upx;">￥</label>
					<label>{{ resData.vip[0].cust_prc.numder || "0.00"  }}{{ resData.vip[0].cust_prc.unit || '' }}</label>
				</view>
			</view>
		</view>
		<view class="chart-box f-center">
			<view class="qiun-charts f-center" style="position: relative;">
				<canvas type="2d" canvas-id="cvsSell" id="cvsSell" class="charts" @touchstart="touchRing" :style="{position: 'absolute',zIndex: chartData.pay_amt.numder != 0 ? 20 :1}"></canvas>

				<view :style="{ position: 'absolute', zIndex: chartData.pay_amt.numder == 0 ? 20 : 1 }" class="shopStop f-column-WHcenter">
					<img src="@/static/image/shopStop.png" alt="" style="width: 140upx;height: 170upx;background-color: #fff;" />
					<label v- style="color: #CCCCCC;">{{ query.dateTypeName }}无营业</label>
				</view>
			</view>
		</view>
		<view class="tietle-box">
			<sun-tietleBox :tietleData="'会员消费'" :showLine="false"></sun-tietleBox>
		</view>
		<view :id="idTopHeight" class="f-row-Wcenter" :style="{ padding: 0 + ' ' + tableMargin + 'rpx' }">
			<wyb-table ref="table" :width="'710rpx'" :defaultColWidth="defaultColWidth" :headers="headers" :contents="resData.vip"
			 :header-bg-color="'#128A80'" :header-ft-color="'#ffffff'" :loading="false" :first-line-fixed="false" :maxHeight="topHeight - tableMargin * 2 + 'rpx'"
			 :min-height="[65, 50]" />
		</view>
		<view class="tietle-box">
			<sun-tietleBox :tietleData="'门店收银'" :showLine="false"></sun-tietleBox>
		</view>
		<view :id="idTopHeight2" class="table-box f-row-Wcenter" :style="{ padding: 0 + ' ' + tableMargin + 'rpx ' + tableMargin + 'rpx ' + tableMargin + 'rpx ' }">
			<!-- topHeight2是计算在屏幕的高度,但可能太小,小于604话就按604  -->
			<wyb-table ref="table2" :width="'710rpx'" :defaultColWidth="defaultColWidth2" :headers="headers2" :contents="resData.shop"
			 :header-bg-color="'#128A80'" :header-ft-color="'#ffffff'" :loading="false" :first-line-fixed="false" :maxHeight="(topHeight2 < 615 ? 615 : topHeight2) - tableMargin * 2 + 'rpx'"
			 :min-height="[65, 50]" />
		</view>
	</view>
</template>

<script>
	let canvaRing = null;
	import sunTietleBox from '@/components/sun-titleBox/sun-tietleBox.vue';
	import sunDates from '@/components/sun-Dates/sun-Dates.vue';
	import sunDropDown from '@/components/sun-dropDown/sun-dropDown.vue';
	import uCharts from '@/components/u-charts/u-charts.js';
	import wybTable from '@/components/wyb-table/wyb-table.vue';

	export default {
		components: {
			wybTable,
			sunDates,
			sunTietleBox,
			sunDropDown
		},
		data() {
			return {
				selected: 'd',
				//图表
				cWidth: 750,
				cHeight: 450,
				pixelRatio: 2,
				chartData: {
					pay_amt: {
						numder: 0
					},
					sale_amt: {
						numder: 0
					},
					series: [{
						name: '销售额',
						data: 100,
						color: 'rgba(254, 214, 143, 1)',
						legendShape: 'diamond'
					}]
				},
				//查询
				query: {
					branch_jg: '', //机构 支持%为全部机构
					start_date: 10000000,
					end_date: 10000000
				},
				headers: [{
						label: '新增会员',
						key: 'vip_newnums',
						width: 140,
						widthInit: 140
					},
					{
						label: '消费会员人数',
						key: 'vip_salemans'
					},
					{
						label: '会员充值额',
						key: 'vip_fillamt'
					},
					{
						label: '会员消费额',
						key: 'pay_amt'
					}
				],
				resData: {
					list: [

					],
					vip: [{
						sale_amt: {
							numder: 0
						},
						ret_amt: {
							numder: 0
						},
						cust_nums: {
							numder: 0
						},
						cust_prc: {
							numder: 0
						}
					}],
					shop: [

					]
				},
				headers2: [{
						label: '门店名称',
						key: 'data_title',
						width: 280,
						widthInit: 280
					},
					{
						label: '销售额',
						key: 'sale_amt'
					},
					{
						label: '毛利额',
						key: 'ml_amt'
					}
				],

				//表格
				defaultColWidth2: 0,
				defaultColWidth: 0,
				idTopHeight2: 'tabel-box2',
				topHeight2: 0, //表格的父元素上面的高度$util.getTopHeight
				idTopHeight: 'tabel-box',
				topHeight: 0, //表格的父元素上面的高度$util.getTopHeight
				tableMargin: 20
			};
		},
		onLoad() {
			this.cWidth = uni.upx2px(750); //小程序charts宽度（.charts元素居中的话和元素的宽度同等）
			this.cHeight = uni.upx2px(450); //小程序都要改cHeight，qiun-charts，charts高度
			this.pixelRatio = uni.getSystemInfoSync().pixelRatio;
			if(this.pixelRatio > 2){
				this.pixelRatio = 2;
			}
			this.$util.getDefaultColWidth(this, 710, 'headers', 'defaultColWidth');
			this.$util.getDefaultColWidth(this, 710, 'headers2', 'defaultColWidth2');
		},
		mounted() {
			//加topHeight变量
			this.$util.getTopHeight(this, this.idTopHeight, this.tableMargin);
			this.$util.getTopHeight(this, this.idTopHeight2, this.tableMargin, 'topHeight2');
		},
		computed: {
			userInfo() {
				let userInfo = this.$store.getters.getUserInfo;
				userInfo.wxUser = userInfo.wxUser ? userInfo.wxUser : {};
				return userInfo;
			}
		},
		methods: {
			onSubmitAddress(e) {
				this.query.branch_jg = e.address.branch_no;
				this.query.branch_name = e.address.branch_name;
				this.getlogin();
			},
			touchRing(e) {
				canvaRing.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data;
					}
				});
			},
			onSubmitDate(e) {
				this.query = { ...this.query,
					...e
				};
				this.getlogin();
			},
			getlogin() {
				if (this.query.branch_jg == '') {
					this.query.branch_name = this.userInfo.branch_name;
					this.query.branch_jg = this.userInfo.branch_default;
				}

				let query = this.query;
				// query.Params.end_date= 1609372800000;
				// query.Params.start_date= 1577808000000;
				this.$api_server.dwzy_GetAppSaleMonitorAnalysis({
					data: query,
					success: res => {
						if (res.data.data) {
							this.resData.list = res.data.data;
							let series = [];
							this.resData.vip = [];
							this.resData.shop = [];
							this.chartData.pay_amt = 0;
							this.resData.list.forEach(item => {
								if (item.datatype == 1) {
									//支付分类数据
									let data = {
										name: item.data_title,
										data: item.pay_amt,
										legendShape: 'diamond'
										// color
									};
									series.push(data);
									this.chartData.pay_amt = this.$util.floatObj.add(this.chartData.pay_amt, item.pay_amt);
								} else if (item.datatype == 2) {
									//门店收银 ml_amt/sale_amt
									this.resData.shop.push(item);
								} else if (item.datatype == 0) {
									//销售额，退款，单数，客单价
									//会员消费
									this.resData.vip.push(item);

									//算类别总数转换中文单位
									let item1 = this.$util.moneyUnit(this.resData.vip[0].sale_amt);
									this.resData.vip[0].sale_amt = { ...this.resData.vip[0].sale_amt,
										...item1
									};
									item1 = this.$util.moneyUnit(this.resData.vip[0].ret_amt);
									this.resData.vip[0].ret_amt = { ...this.resData.vip[0].ret_amt,
										...item1
									};
									item1 = this.$util.moneyUnit(this.resData.vip[0].cust_nums);
									this.resData.vip[0].cust_nums = { ...this.resData.vip[0].cust_nums,
										...item1
									};
									item1 = this.$util.moneyUnit(this.resData.vip[0].cust_prc);
									this.resData.vip[0].cust_prc = { ...this.resData.vip[0].cust_prc,
										...item1
									};
								}
							});
							//零售总额
							this.chartData.pay_amt = this.$util.moneyUnit(this.chartData.pay_amt);
							//支付分类数据
							this.chartData.series = series;
							//console.log('chartData>>>>>>>',this.chartData);
							if (this.chartData.pay_amt.numder != 0) {
								this.showCanvas();
							}
						}
					},
					fail(error) {
						console.log('error', error);
					}
				});
			},

			showCanvas() {
				let _self = this;
				let canvasId = 'cvsSell';
				let data1 = {
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 12,
					dataLabel: false,
					legend: true,
					legend: {
						position: 'right',
						fontSize: 30,
						lineHeight: 22,
						padding: 22
					},
					title: {
						name: _self.chartData.pay_amt.numder + _self.chartData.pay_amt.unit,
						color: '#7cb5ec',
						fontSize: 25 * _self.pixelRatio,
						offsetY: -5 * _self.pixelRatio
					},
					subtitle: {
						name: '零售总额',
						color: '#666666',
						fontSize: 20 * _self.pixelRatio,
						offsetY: -8 * _self.pixelRatio
					},
					extra: {
						pie: {
							offsetAngle: -45,
							ringWidth: 25 * _self.pixelRatio,
							labelWidth: 5
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: _self.chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					disablePieStroke: true
				};
				//#ifdef MP
				const query = uni.createSelectorQuery();
				query
					.select('#' + canvasId)
					.fields({
						node: true,
						size: true
					})
					.exec(res => {
						const canvas = res[0].node;
						const ctx = canvas.getContext('2d');
						canvas.width = res[0].width * _self.pixelRatio;
						canvas.height = res[0].height * _self.pixelRatio;

						data1.canvas2d = true;
						data1.context = ctx;
						canvaRing = new uCharts(data1);
					});
				//#endif
				//#ifndef MP
				canvaRing = new uCharts(data1);
				//#endif
			}
		}
	};
</script>

<style scoped lang="scss">
	.shopStop {
		background: #fff;
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.select-box {
		margin-top: 20upx;
		padding: 0 20upx;
	}

	.dates-box {
		margin: 0 20upx;
		padding: 20upx;
		border-radius: 10upx;
		background-color: rgba($color: #ffffff, $alpha: 1);
	}

	.tietle-box {
		margin: 0 20upx;
	}

	.total-box {
		margin: 0 20upx;
		// padding: 20upx;
		// background: rgba(255,255,255,1);
		border-radius: 10upx;

		.itemMoney {
			background: rgba(255, 255, 255, 1);
			box-shadow: 5upx 5upx 5upx rgba(231, 231, 231, 1);
			border-radius: 20upx;
			padding: 15upx;
			min-height: 160upx;

			&:nth-of-type(1) {
				.icons {
					color: #975fe3;
					font-size: 40upx;
				}
			}

			&:nth-of-type(2) {
				.icons {
					color: #fa6e32;
					font-size: 45upx;
				}
			}

			&:nth-of-type(3) {
				.icons {
					color: #00bb28;
					font-size: 43upx;
				}
			}

			&:nth-of-type(4) {
				.icons {
					color: #8b91f1;
					font-size: 38upx;
				}
			}
		}
	}

	.charts {
		height: 450upx; //小程序chart元素的高度(.qiun-charts元素外层  统一)
		// #ifdef MP
		width: 710upx; //小程序chart元素的宽度（同cWidth）（父级宽度减父级的padding宽度）
		// #endif
		// #ifndef MP
		width: 1400upx; //小程序chart元素的宽度（同cWidth）（父级宽度减父级的padding宽度）
		height: 900upx; //小程序chart元素的高度(.qiun-charts元素外层  统一)
		position: absolute;
		top: 0; 
		left: 0;
		transform: scale(0.5) translate(-50%, -50%);
		// #endif
		background-color: rgba(255, 255, 255, 1);
	}

	.chart-box {
		width: 100%;
		box-sizing: border-box;

		.qiun-charts {
			margin: 20upx 20upx 0 20upx;
			padding: 20upx;
			border-radius: 20upx;
			box-sizing: border-box;
			background: rgba(255, 255, 255, 1);

			width: 710upx;
			height: 450upx; //小程序chart元素外层 (.charts 统一)


			.qiun-padding {
				//padding: 2%;
				width: 96%;
			}

			.qiun-wrap {
				display: flex;
				flex-wrap: wrap;
			}

			.qiun-rows {
				display: flex;
				flex-direction: row !important;
			}

			.qiun-columns {
				display: flex;
				flex-direction: column !important;
			}

			.qiun-common-mt {
				margin-top: 10upx;
			}

			.qiun-bg-white {
				background: rgba(0, 0, 0, 0);
			}

			.qiun-title-bar {
				width: 96%;
				padding: 10upx 2%;
				flex-wrap: nowrap;
			}

			.qiun-title-dot-light {
				border-left: 10upx solid #0ea391;
				padding-left: 10upx;
				font-size: 32upx;
				color: #000000;
			}
		}
	}
</style>
